import React, { useState, useEffect } from "react";
import { Table, Col, Row, Pagination } from "antd";
import { activity_message_list } from "../../api/pro";
import "./css/index.scss";
import "dayjs/locale/zh-cn";
import moment from "moment";
import UpdataData from "./componemts/index";
const { Column } = Table;
const UserSet = () => {
  const [listData, setListData] = useState({
    data: [],
    count: 0,
  });
  const [current, setCurrent] = useState(1);
  const [childData, setChildData] = useState({
    title: "新增活动消息",
    formData: null,
    isModalOpen: false,
  });
  useEffect(() => {
    activity_message_list({ page: current }).then((res) => {
      console.log(res);
      if (res.code === 200) {
        setListData((prevSearch) => ({
          ...prevSearch,
          data: res.list,
          count: res.totalCount,
        }));
      }
    });
  }, [current]);

  const onChange = (page) => {
    console.log(page);
    setCurrent(page);
  };
  const showModal = () => {
    setChildData({
      title: "新增活动消息",
      isModalOpen: true,
      formData: null,
    });
  };

  const selData = (data, title) => {
    console.log(data, title);
    // setCopyData(JSON.parse(JSON.stringify(data)));
    setChildData({
      title: title,
      isModalOpen: true,
      formData: JSON.parse(JSON.stringify(data)),
    });
  };
  const delData = (data) => {
    const newData = listData.data.filter((item) => item.id !== data);
    setListData((prevSearch) => ({
      ...prevSearch,
      data: newData,
    }));
  };
  const callback = (e) => {
    let data = JSON.parse(JSON.stringify(listData.data));
    if (e.type === "add") {
      e.data.key = listData.data.length + 2 + "keys";
      e.data.id = listData.data.length + 2 + "keys";
      data.push(e.data);
      setListData((prevSearch) => ({
        ...prevSearch,
        data,
      }));
    } else if (e.type === "updata") {
      console.log("修改");
      const newData = data.map(item => {
        if (item.id === e.data.id) {
          return { ...e.data };
        }
        return item;
      });
      setListData((prevSearch) => ({
        ...prevSearch,
        data:newData,
      }));
      console.log(newData)
    } else if (e.type === "sel") {
      console.log("查看");
    }
  };
  return (
    <div className="userSet">
      <div className="filter">
        <Row gutter={16}>
          <Col span={3} offset={21}>
            <button className="btn primary" onClick={showModal}>
              新增
            </button>
          </Col>
        </Row>
      </div>
      <UpdataData childData={childData} callback={callback} />
      <div className="tables">
        <Table dataSource={listData.data} bordered rowKey="id">
          <Column title="#" dataIndex="id" width={20} key="id" />
          <Column
            title="活动消息标题"
            dataIndex="title"
            width={250}
            key="title"
          />
          <Column
            title="状态"
            width={80}
            dataIndex="state"
            key="state"
            render={(state) => <span>{state === 0 ? "未启用" : "启用"}</span>}
          />
          <Column
            title="活动开始时间"
            width={170}
            dataIndex="startTime"
            key="startTime"
            render={(startTime) => (
              <>{moment.utc(startTime).format("YYYY/MM/DD")}</>
            )}
          />
          <Column
            title="活动结束时间"
            dataIndex="endTime"
            width={170}
            key="endTime"
            render={(endTime) => (
              <>{moment.utc(endTime).format("YYYY/MM/DD")}</>
            )}
          />
          <Column
            title="操作"
            width={250}
            fixed="right"
            key="action"
            render={(_, record) => (
              <div className="btns">
                <button
                  className="btn success"
                  onClick={(e) => {
                    selData(record, "查看活动消息");
                  }}
                >
                  查看
                </button>
                <button
                  className="btn success"
                  onClick={(e) => {
                    selData(record, "修改活动消息");
                  }}
                >
                  修改
                </button>
                <button
                  className="btn error"
                  onClick={(e) => {
                    delData(record.id);
                  }}
                >
                  删除
                </button>
              </div>
            )}
          />
        </Table>
        <div className="pagination">
          <Pagination
            current={current}
            onChange={onChange}
            total={listData.count}
          />
        </div>
      </div>
    </div>
  );
};

export default UserSet;
